<template>
  <div>
    <div id="main" style="height: 280px; width: 100%"></div>
    <div id="syscBubleChart" style="width: 100%; height: 340px"></div>
    <div id="pieChartMian" style="width: 100%; height: 300px"></div>
  </div>
</template>

<script>
import * as echarts from "echarts/core";
import {
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  VisualMapComponent,
} from "echarts/components";
import { LineChart } from "echarts/charts";
import { UniversalTransition } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";
import { ScatterChart } from "echarts/charts";
import { PieChart } from "echarts/charts";
import { LabelLayout } from "echarts/features";
import Basicdata from "./data";

echarts.use([
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  LineChart,
  CanvasRenderer,
  UniversalTransition,
  VisualMapComponent,
  ScatterChart,
  PieChart,
  LabelLayout,
]);

export default {
  name: "left",
  components: {},
  data() {
    return {
      DemographicData: Basicdata.DemographicData,
      educationData: Basicdata.education,
    };
  },
  created() {},
  mounted() {
    this.initCharts();
    this.wavePointEchart();
    this.intoPieChart();
  },
  methods: {
    //面积图
    initCharts() {
      // 初始化echarts实例
      var chartDom = document.getElementById("main");
      var myChart = echarts.init(chartDom);
      // 绘制图表
      var option = {
        color: ["#80FFA5", "#00DDFF", "#37A2FF", "#FF0087", "#FFBF00"],
        // title: {
        //   text: "Gradient Stacked Area Chart",
        // },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        legend: {
          data: ["总人口", "死亡人口", "出生人口"],
          textStyle: {
            color: "#FFF",
          },
        },
        // toolbox: {
        //   feature: {
        //     saveAsImage: {},
        //   },
        // },
        grid: {
          top: "10%",
          left: -20,
          right: "4%",
          bottom: "0%",
          containLabel: true,
        },
        xAxis: [
          {
            show: false,
            type: "category",
            boundaryGap: false,
            data: ["5月", "6月", "7月", "8月", "9月", "10月"],
          },
        ],
        yAxis: [
          {
            show: false,
            type: "value",
          },
        ],
        series: [
          {
            name: "总人口",
            type: "line",
            stack: "Total",
            smooth: true,
            lineStyle: {
              width: 0,
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(128, 255, 165)",
                },
                {
                  offset: 1,
                  color: "rgba(1, 191, 236)",
                },
              ]),
            },
            emphasis: {
              focus: "series",
            },
            data: [5916, 7425, 5616, 5217, 6012, 6987],
          },
          {
            name: "死亡人口",
            type: "line",
            stack: "Total",
            smooth: true,
            lineStyle: {
              width: 0,
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(0, 221, 255)",
                },
                {
                  offset: 1,
                  color: "rgba(77, 119, 255)",
                },
              ]),
            },
            emphasis: {
              focus: "series",
            },
            data: [124, 95, 110, 56, 184, 76],
          },
          {
            name: "出生人口",
            type: "line",
            stack: "Total",
            smooth: true,
            lineStyle: {
              width: 0,
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(55, 162, 255)",
                },
                {
                  offset: 1,
                  color: "rgba(116, 21, 219)",
                },
              ]),
            },
            emphasis: {
              focus: "series",
            },
            data: [67, 45, 98, 67, 84, 32],
          },
          //   {
          //     name: "Line 4",
          //     type: "line",
          //     stack: "Total",
          //     smooth: true,
          //     lineStyle: {
          //       width: 0,
          //     },
          //     showSymbol: false,
          //     areaStyle: {
          //       opacity: 0.8,
          //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          //         {
          //           offset: 0,
          //           color: "rgba(255, 0, 135)",
          //         },
          //         {
          //           offset: 1,
          //           color: "rgba(135, 0, 157)",
          //         },
          //       ]),
          //     },
          //     emphasis: {
          //       focus: "series",
          //     },
          //     data: [220, 402, 231, 134, 190, 230, 120],
          //   },
          //   {
          //     name: "Line 5",
          //     type: "line",
          //     stack: "Total",
          //     smooth: true,
          //     lineStyle: {
          //       width: 0,
          //     },
          //     showSymbol: false,
          //     label: {
          //       show: true,
          //       position: "top",
          //     },
          //     areaStyle: {
          //       opacity: 0.8,
          //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          //         {
          //           offset: 0,
          //           color: "rgba(255, 191, 0)",
          //         },
          //         {
          //           offset: 1,
          //           color: "rgba(224, 62, 76)",
          //         },
          //       ]),
          //     },
          //     emphasis: {
          //       focus: "series",
          //     },
          //     data: [220, 302, 181, 234, 210, 290, 150],
          //   },
        ],
      };

      myChart.setOption(option);
    },
    //波点图wavepoint
    wavePointEchart() {
      var chartDom = document.getElementById("syscBubleChart");
      var myChart = echarts.init(chartDom);
      // 计算数据总和  reduce
      let result = this.DemographicData.reduce(
        (sum, e) => Number(sum) + Number(e.num),
        0
      );
      var datalist = [
        {
          offset: [0, 60],
          symbolSize: 100,
          opacity: 0.5,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(0, 221, 255)",
            },
            {
              offset: 1,
              color: "rgba(77, 119, 255)",
            },
          ]),
        },
        {
          offset: [0, 99],
          symbolSize: 120,
          opacity: 0.5,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(55, 162, 255)",
            },
            {
              offset: 1,
              color: "rgba(116, 21, 219)",
            },
          ]),
        },
        {
          offset: [15, 30],
          symbolSize: 130,
          opacity: 0.5,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(255, 0, 135)",
            },
            {
              offset: 1,
              color: "rgba(135, 0, 157)",
            },
          ]),
        },
        {
          offset: [40, 65],
          symbolSize: 130,
          opacity: 0.5,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(255, 191, 0)",
            },
            {
              offset: 1,
              color: "rgba(224, 62, 76)",
            },
          ]),
        },
        {
          offset: [70, 35],
          symbolSize: 130,
          opacity: 0.5,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(128, 255, 165)",
            },
            {
              offset: 1,
              color: "rgba(1, 191, 236)",
            },
          ]),
        },
        {
          offset: [60, 90],
          symbolSize: 130,
          opacity: 0.5,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgb(173 28 28)",
            },
            {
              offset: 1,
              color: "rgb(238 102 102)",
            },
          ]),
        },
        {
          offset: [99, 99],
          symbolSize: 130,
          opacity: 0.5,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgb(78 143 47)",
            },
            {
              offset: 1,
              color: "rgb(145 204 117)",
            },
          ]),
        },
        {
          offset: [85, 65],
          symbolSize: 130,
          opacity: 0.5,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgb(109 140 235)",
            },
            {
              offset: 1,
              color: "rgb(173 188 235)",
            },
          ]),
        },
        {
          offset: [99, 20],
          symbolSize: 130,
          opacity: 0.5,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgb(12 138 187)",
            },
            {
              offset: 1,
              color: "rgb(115 192 222)",
            },
          ]),
        },
      ];
      var datas = [];
      for (var i = 0; i < this.DemographicData.length; i++) {
        var item = this.DemographicData[i];
        var itemToStyle = datalist[i];
        datas.push({
          // name: item.name + "\n" + item.value,
          name:
            item.num +
            "人" +
            "\n" +
            // "\n" +
            // "\n" +
            // "\n" +
            item.tip, //气泡的百分比,
          value: itemToStyle.offset,
          symbolSize: ((item.num / result) * 800).toFixed(2),
          label: {
            normal: {
              textStyle: {
                fontSize: 16,
                lineHeight: 17,
                color: "rgb(255 255 255)",
                padding: [68, 0, 0, 0],
              },
            },
          },
          itemStyle: {
            normal: {
              color: itemToStyle.color,
              opacity: itemToStyle.opacity,
              borderWidth: "2",
              borderColor: item.color,
              borderType: "solid",
            },
          },
        });
      }
      let option = {
        // backgroundColor: "#20203e",
        color: ["#80FFA5", "#00DDFF", "#37A2FF", "#FF0087", "#FFBF00"],
        // title: {
        //   text: "Gradient Stacked Area Chart",
        // },
        grid: {
          show: false,
          left: "10%",
          right: "10%",
          top: "12%",
          bottom: -20,
          containLabel: true,
        },
        tooltip: {
          trigger: "item",
          // backgroundColor: "rgba(0,0,0,0.9)",
          formatter: function (params) {
            let titleName;
            if (params.dataIndex == 0) {
              titleName = "80岁以上";
            } else if (params.dataIndex == 1) {
              titleName = "70-80岁";
            } else if (params.dataIndex == 2) {
              titleName = "60-70岁";
            } else if (params.dataIndex == 3) {
              titleName = "50-60岁";
            } else if (params.dataIndex == 4) {
              titleName = "40-50岁";
            } else if (params.dataIndex == 5) {
              titleName = "30-40岁";
            } else if (params.dataIndex == 6) {
              titleName = "20-30岁";
            } else if (params.dataIndex == 7) {
              titleName = "10-20岁";
            } else if (params.dataIndex == 8) {
              titleName = "10岁以下";
            }
            return (
              '<span style="font-size: 0.2rem;font-weight: bold;font-family: SourceHanSansCN;">' +
              titleName +
              "</span>" +
              // params.seriesName +
              "<br/>" +
              params.marker +
              '<span style="font-size: 0.2rem;font-weight: bold;font-family: SourceHanSansCN;">' +
              params.data["name"] +
              "\n" +
              "</span>"
            );
          },
        },
        legend: {
          show: false,
          left: 85,
          bottom: 0,
          trigger: "axis",
          // 图例文字颜色
          textStyle: {
            fontSize: "16",
            fontWeight: "bold",
            fontFamily: "SourceHanSansCN",
            color: "#A0B2D3",
          },
          icon: "rect",
          itemWidth: 10,
          itemHeight: 10,
        },
        xAxis: [
          {
            gridIndex: 0,
            type: "value",
            show: false,
            min: 0,
            max: 100,
            nameLocation: "middle",
            nameGap: 5,
          },
        ],
        yAxis: [
          {
            gridIndex: 0,
            min: 0,
            show: false,
            max: 100,
            nameLocation: "middle",
            nameGap: 30,
          },
        ],
        series: [
          {
            name: "80岁以上",
            // color:'red',
            type: "scatter",
            symbol: "circle",
            symbolSize: 120,
            label: {
              normal: {
                show: true,
                formatter: "{b}",
                color: "#fff",
                textStyle: {
                  fontSize: "20",
                  fontFamily: "BoldCondensed",
                },
              },
            },
            dataLabels: {
              allowOverlap: true,
            },
            data: datas,
          },
          {
            name: "70-80",
            // color:'red',
            type: "scatter",
            symbol: "circle",
            symbolSize: 120,
            label: {
              normal: {
                show: true,
                formatter: "{b}",
                color: "#fff",
                textStyle: {
                  fontSize: "20",
                  fontFamily: "BoldCondensed",
                },
              },
            },
            data: datas,
          },
          {
            name: "60-70",
            type: "scatter",
            symbol: "circle",
            symbolSize: 120,
            label: {
              normal: {
                show: true,
                formatter: "{b}",
                color: "#fff",
                textStyle: {
                  fontSize: "20",
                  fontFamily: "BoldCondensed",
                },
              },
            },
            data: datas,
          },
          {
            name: "50-60",
            type: "scatter",
            symbol: "circle",
            symbolSize: 120,
            label: {
              normal: {
                show: true,
                formatter: "{b}",
                color: "#fff",
                textStyle: {
                  fontSize: "20",
                  fontFamily: "BoldCondensed",
                },
              },
            },
            data: datas,
          },
          {
            name: "40-50",
            type: "scatter",
            symbol: "circle",
            symbolSize: 120,
            label: {
              normal: {
                show: true,
                formatter: "{b}",
                color: "#fff",
                textStyle: {
                  fontSize: "20",
                  fontFamily: "BoldCondensed",
                },
              },
            },
            data: datas,
          },
          {
            name: "30-40",
            type: "scatter",
            symbol: "circle",
            symbolSize: 120,
            label: {
              normal: {
                show: true,
                formatter: "{b}",
                color: "#fff",
                textStyle: {
                  fontSize: "20",
                  fontFamily: "BoldCondensed",
                },
              },
            },
            data: datas,
          },
          {
            name: "20-30",
            type: "scatter",
            symbol: "circle",
            symbolSize: 120,
            label: {
              normal: {
                show: true,
                formatter: "{b}",
                color: "#fff",
                textStyle: {
                  fontSize: "20",
                  fontFamily: "BoldCondensed",
                },
              },
            },
            data: datas,
          },
          {
            name: "10-20",
            type: "scatter",
            symbol: "circle",
            symbolSize: 120,
            label: {
              normal: {
                show: true,
                formatter: "{b}",
                color: "#fff",
                textStyle: {
                  fontSize: "20",
                  fontFamily: "BoldCondensed",
                },
              },
            },
            data: datas,
          },
          {
            name: "10岁以下",
            type: "scatter",
            symbol: "circle",
            symbolSize: 120,
            label: {
              normal: {
                show: true,
                formatter: "{b}",
                color: "#fff",
                textStyle: {
                  fontSize: "20",
                  fontFamily: "BoldCondensed",
                },
              },
            },
            data: datas,
          },
        ],
      };
      myChart.setOption(option);
    },
    //环形图
    intoPieChart() {
      var chartDom = document.getElementById("pieChartMian");
      var myChart = echarts.init(chartDom);
      var option;

      // 计算数据总和  reduce
      let result = this.educationData.reduce(
        (sum, e) => Number(sum) + Number(e.value),
        0
      );
      console.log(result);
      // let datas = [];

      option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          x: "right",
          y: " center",
          width: "100",
          padding: [40, 10, 0, 0],
          itemWidth: 30,
          textStyle: {
            color: "#FFF",
          },
        },
        series: [
          {
            name: "各学历占比",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: true,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
              formatter: "{b}：{c}  ({d}%) ",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "20",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: true,
            },
            data: this.educationData,
          },
        ],
      };

      option && myChart.setOption(option);
    },
  },
};
</script>
